<div class="clear"></div>
<div id="login" style="width:320px; margin:5px 300px 0px 300px; border:1px solid #E5E5E5; padding:16px;">
  <form id="form-login" method="post" action="<?php e($this->base); ?>/members/login" name="loginform" onsubmit="return login();">
    <div style="margin:0 0 5px 16px; color:#777777; font-size:13px;"><?php __('User Id'); ?></div>
    <input type="text" id="user_id" name="user_id" tabindex="20" size="20" class="input"
     style="background:#FBFBFB; width:300px; border:1px solid #E5E5E5; font-size:24px; margin: 5px 6px 16px; padding:3px;" />
    <div style="margin:0 0 5px 16px; color:#777777; font-size:13px;"><?php __('Password'); ?></div>
    <input type="password" id="password" name="password" tabindex="20" size="20" class="input"
     style="background:#FBFBFB; width:300px; border:1px solid #E5E5E5; font-size:24px; margin: 5px 6px 16px; padding:3px;" />
    <div class="center"><input type="submit" id="login-button" value="Log In" /></div>
  </form>
</div>

<script>
function message (msg, focus) {
    alert(msg);

    if (typeof focus != 'undefined') {
        Ext.fly(focus).focus();
    }
} // message

function login () {
    var form_log = Ext.query('input', 'form-login');
    var user_id  = Ext.get('user_id');
    var password = Ext.get('password');

    if (!user_id.getValue()) {
        message('Please enter your user id', 'user_id');
        return false;
    }
    if (!password.getValue()) {
        message('Please enter your password', 'password');
        return false;
    }

    transId = Ext.Ajax.request({
        form: 'form-login',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (typeof obj != 'object') {
                message('Something is wrong, would you mind to try again later?', 'user_id');
                return false;
            } else if (obj.status == false) {
                var mesg = (obj.mesg) ? obj.mesg : 'Login failure, please try again..';
                password.dom.value = '';
                message(mesg, 'user_id');
                return false;
            } else {
                password.fadeOut();
                Ext.fly('form-login').fadeOut({ useDisplay:true });
                Ext.fly('form-login').insertHtml('afterEnd', '<span id="status" style="display:none;">Accessing..</span>');
                Ext.fly('status').pause(1).fadeIn();
                document.location = '<?php e($this->base); ?>/members';
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('login-button').dom.value = 'Log In';
            Ext.each(form_log, function(e){ e.disabled = false });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.fly('login-button').dom.value = 'Logging..';
        Ext.each(form_log, function(e){ e.disabled = true });
    }

    return false;
} // login
</script>